<template>
  <!-- 详情弹窗 -->
  <a-modal
    :maskClosable="false"
    :destroyOnClose="true"
    title="详情"
    centered
    width="600px"
    v-model="visible"
  >
    <div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">会员名称:</div>
        <div>{{ item.memberName }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">原职务:</div>
        <div>{{ item.levelName }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">本期职务:</div>
        <div>{{ item.nowLevelName }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">缴费类型:</div>
        <div>{{ item.type === 1 ? '续费' : '首次缴费' }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">当前状态:</div>
        <div style="color: #1890ff;">{{ (item.paymentStatus = 0 ? '待缴费' : '已缴费') }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">开始时间:</div>
        <div>{{ item.startTime }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">到期时间:</div>
        <div>{{ item.endTime }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">应缴费用:</div>
        <div>{{ (item.money || 0) + '元' }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">实缴费用:</div>
        <div>{{ (item.nowMoney || 0) + '元' }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">缴费时间:</div>
        <div>{{ item.createTime }}</div>
      </div>
      <div class="disFlxAC _pb-5">
        <div class="label">缴费凭证:</div>
        <ImgOrVideo v-if="item.paymentVoucher" :item="{coverUrl: item.paymentVoucher, url: item.paymentVoucher}" preview :width="50" :height="50" />
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">审核人员:</div>
        <div>{{ item.sysUserName }}</div>
      </div>
      <div class="disFlxAC _pb-5 linh-35">
        <div class="label">备注:</div>
        <div>{{ item.remarks }}</div>
      </div>
    </div>
    <template slot="footer">
      <a-button type="primary" @click="cancel">确定</a-button>
    </template>
  </a-modal>
</template>

<script>
import { getDetail } from '@/api/member/record'
import ImgOrVideo from '@/components/ImgOrVideo'

export default {
  components: {
    ImgOrVideo
  },
  data() {
    return {
      visible: false,
      id: '',
      itemBefore: '',
      itemAfter: '',
      item: []
    }
  },
  created() {},

  methods: {
    moduleShow(id) {
      this.id = id
      console.log('id=', this.id)
      this.visible = true
      getDetail({ id: this.id }).then(res => {
        this.item = res.data
      })
    },
    cancel() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.label {
  flex-shrink: 0;
  width: 120px;
  padding-right: 20px;
  text-align: right;
  color: #333;
  font-weight: 500;
}
</style>
